<template>
    <div>
        <div>
            <el-input v-model="house.ownerNickname" placeholder="请输入昵称" style="width: 15%"></el-input>
            <el-input v-model="house.ownerRealName" placeholder="请输入真实姓名" style="width:15%"></el-input>
            <el-button type="primary" @click="showowner">搜索</el-button>
            <el-button type="primary" @click="reflesh">重置</el-button>
        </div>


        <el-table
                :data="zycommunityinteractions"
                style="width: 100%;text-align: center"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>

            <el-table-column
                    label="序号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{scope.row.interactionId}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="昵称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyOwner.ownerNickname }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="真实姓名"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyOwner.ownerRealName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="手机号码"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyOwner.ownerPhoneNumber }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="创建时间"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="内容"
                    width="500px">
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="图片"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ " " }}</span>
                </template>
            </el-table-column>


            <el-table-column label="操作"
                             width="200px">
                <template slot-scope="scope">
                    <el-link icon="el-icon-close" @click="huixian(scope.row)">更多操作</el-link>
                    <el-link icon="el-icon-delete" @click="del(scope.$index,scope.row)">删除</el-link>
                </template>

            </el-table-column>

        </el-table>

        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[1, 2, 6, 8]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    
</template>

<script>
    export default {
        name: "CommunityInteraction",
        data(){
            return{
                dialogFormVisible: false,
                zycommunityinteractions:[],
                total: 0,
                current: 1,
                size: 1,
                formLabelWidth: "200px",
                form:{
                    interactionId:"",
                    createTime:"",
                    content:"",
                    ownerId:"",
                    ownerNickname:"",
                    ownerRealName:"",
                    ownerPhoneNumber:""

                },
                house: {
                    ownerNickname: "",
                    ownerRealName: "",
                },

            }
        },
        methods:{
            handleSizeChange(val) {
                this.size = val;
                this.showowner(this.current, this.size);

            },
            handleCurrentChange(val) {
                this.current = val;
                this.showowner(this.current, this.size);
            },
            showowner(current, size) {
                this.current = 1;
                if (current > 1) {
                    this.current = current;
                    this.size = size;
                }

                this.axios.get("http://localhost:8080/zycommunityinteraction/page/fuzzy?current=" + this.current + "&size=" + this.size + "&ownerNickname=" + this.house.ownerNickname + "&ownerRealName=" + this.house.ownerRealName )
                    .then(res => {
                        console.log(res)
                        this.zycommunityinteractions = res.data.data.records;
                        this.current = res.data.data.current;
                        this.size = res.data.data.size;
                        this.total = res.data.data.total;
                    })
            },


        },
        created() {
            this.showowner(this.current, this.size);


        }

    }
</script>

<style scoped>

    /deep/ .el-table th > .cell{
        text-align: center;
    }

    /deep/ .el-table .cell {
        text-align: center;
    }


</style>